<script setup>
defineOptions({
  name: 'HomeCart'
})
import { useCartStore } from '@/stores/cartList.js'
import { Minus, Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'

const cartStore = useCartStore()
cartStore.setcartList()
const visible = ref([])
const del = (ids) => {
  cartStore.removeCartList([ids])
  ElMessage.success('删除成功')
}
</script>

<template>
  <div>
    <div class="container py-5">
      <el-table style="width: 100%" :data="cartStore.cartList">
        <el-table-column width="100px" type="selection">
          <template #default="{ row }">
            <el-checkbox
              :model-value="row.selected"
              @click="
                cartStore.togCartItem(row.skuId, {
                  selected: !row.selected,
                  count: row.count
                })
              "
            >
            </el-checkbox>
          </template> </el-table-column
        >>
        <el-table-column label="商品信息" align="center" width="500px">
          <template #default="{ row }">
            <div class="row">
              <div class="col-3 offset-3">
                <img
                  :src="row.picture"
                  width="100"
                  height="100"
                  @click="console.log(cartStore.cartList)"
                  alt=""
                />
              </div>
              <div
                class="col-6 d-flex justify-content-center align-items-center"
              >
                <p>{{ row.name }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="单价" width="170px">
          <template #default="{ row }">
            <h6 class="text-danger">{{ '￥' + row.price }}</h6>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量" width="170px">
          <template #default="{ row }">
            <el-input :value="row.count" align="center">
              <template #prepend>
                <el-button
                  text
                  :icon="Minus"
                  @click="
                    cartStore.togCartItem(row.skuId, {
                      selected: row.selected,
                      count:
                        row.count === 1 ? (row.count = 1) : (row.count -= 1)
                    })
                  "
                ></el-button>
              </template>
              <template #append>
                <el-button
                  text
                  :icon="Plus"
                  @click="
                    cartStore.togCartItem(row.skuId, {
                      selected: row.selected,
                      count: (row.count += 1)
                    })
                  "
                ></el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="小计" width="170px">
          <template #default="{ row }">
            <h6 class="text-danger">{{ '￥' + row.price * row.count }}</h6>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="170px">
          <template #default="{ row, $index }">
            <el-popover
              :visible="visible[$index]"
              placement="right"
              :width="160"
            >
              <p>您确定要删除此商品吗</p>
              <div style="text-align: right; margin: 0">
                <el-button size="small" text @click="visible = false"
                  >取消</el-button
                >
                <el-button size="small" type="primary" @click="del(row.skuId)"
                  >确认</el-button
                >
              </div>
              <template #reference>
                <el-link
                  :underline="false"
                  @click="visible = true"
                  type="success"
                  >删除</el-link
                >
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="当前购物车为空"></el-empty>
        </template>
      </el-table>
    </div>
    <div class="container bg-white p-3 d-flex justify-content-between">
      <div>
        共{{ cartStore.numTotal }}件商品，现选择了{{
          cartStore.cartList
            .filter((item) => item.selected)
            .reduce((total, cur) => total + cur.count, 0)
        }}件，商品合计：
        <h5 class="d-inline text-danger">
          {{
            '￥' +
            cartStore.cartList
              .filter((item) => item.selected)
              .reduce(
                (total, cur) => total + cur.count * parseFloat(cur.price),
                0
              )
          }}
        </h5>
      </div>
      <el-button size="large" type="success" @click="$router.push('/pay')"
        >去结算</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
